<template>
  <div id="app">
    <!--头部1122-->
    <div class="top-box">
      <div class="logo">一村（格）一警及社会治安防控实战平台 - 地铁公交</div>
      <div class="info">
        <img :src="photo" :onerror="errorPhoto" alt="">
        <span class="xm">{{ xm }}</span>
        <span class="jh">{{ jh }}</span>
      </div>
      <div @click="changePost" class="change-btn"><i class="el-icon-refresh"></i>切换岗位</div>
    </div>
    <!--左树菜单1-->
    <div class="menu-box">
      <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#22345E"
          text-color="#fff"
          active-text-color="#fff">
        <div v-for="(item, key) in menuList" :key="key">
          <el-menu-item @click="changeTab(item)" v-if="!item.children" :index="item.name">
            <img :src="item.icon" alt="">
            <span slot="title">{{ item.label }}</span>
          </el-menu-item>
          <el-submenu v-if="item.children && item.children.length > 0" :index="item.name">
            <template slot="title">
              <img :src="item.icon" alt="">
              <span slot="title">{{ item.label }}</span>
            </template>
            <el-menu-item v-for="(x, y) in item.children" :key="y" :index="x.name" @click="changeTab(x)">{{ x.label }}
            </el-menu-item>
          </el-submenu>
        </div>
      </el-menu>
    </div>
    <el-dialog
        width="819px"
        center
        :class="['custom-dialog-fill','font-table']" title="活动审批"
        :visible.sync="dialog.open">

      <div class="dialog-title" slot="title">
        选择岗位
      </div>

      <div class="d-f jc-c">
        <el-form
            class="font-table dialog-position-selector"
            style="color: #000000;"
            ref="form" :model="form"
            label-width="75px">
          <el-form-item prop="resource">
            <el-radio-group v-model="form.position">
              <el-radio class="font-table d-b" label="岗位一"></el-radio>
              <el-radio class="font-table d-b mt15" label="岗位二"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--内容区-->
    <div class="all-content-box">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      xm: '',
      photo: '',
      errorPhoto: 'this.src="' + require('./assets/imgs/touxiang.png') + '";this.onerror=null',
      jh: '',
      menuList: [],
      activeMenu: '',
      dialog: {
        open: false
      },
      form: {}
    }
  },
  mounted() {
    this.xm = sessionStorage.getItem('xm');
    this.photo = sessionStorage.getItem('photo');
    this.jh = sessionStorage.getItem('jh');
    this.$nextTick(() => {
      // 保持刷新页面的时候，页签选中的正确性
      let urlArr = window.location.href.split('/');
      this.activeMenu = urlArr[5];
    })

    this.menuList = this.$router.options.routes;
  },
  methods: {
    changePost() {
      this.dialog.open = true
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changeTab(item) {
      if (this.activeMenu === item.name) {
        return;
      }
      this.activeMenu = item.name;
      this.$router.push({
        name: item.name
      });
    }
  }

}
</script>


<style lang="scss">
#app {
  width: 100%;
  height: 100%;

  .top-box {
    position: relative;
    width: 100%;
    height: 110px;
    /*background-image: linear-gradient(#162283, #2957b5);*/
    background: url("./assets/imgs/top-bg.png") no-repeat;
    background-size: 100% 100%;

    .logo {
      position: absolute;
      top: 12px;
      left: 31px;
      height: 85px;
      padding-left: 100px;
      line-height: 85px;
      background: url("./assets/imgs/gh.png") left center no-repeat;
      font-size: 29px;
      color: #ffffff;
      font-weight: bold;
    }

    .info {
      position: absolute;
      right: 29px;
      top: 14px;
      background: url("./assets/imgs/bg_01.png") no-repeat;
      width: 154px;
      height: 76px;

      img {
        position: relative;
        top: 13px;
        left: 15px;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 9px;

        &:after {
          content: "";
          display: inline-block;
          position: absolute;
          z-index: 2;
          top: 0;
          left: 0;
          width: 50px;
          height: 50px;
          border-radius: 27px;
          background: url("./assets/imgs/touxiang.png") no-repeat;
          background-size: 100%;
          background-color: #fff;
        }
      }

      .xm {
        position: absolute;
        top: 12px;
        left: 72px;
        margin: 5px 0 2px 0;
        font-size: 15px;
        color: #ffffff;
      }

      .jh {
        position: absolute;
        top: 43px;
        left: 72px;
        font-size: 13px;
        color: #ffffff;
      }
    }

    .change-btn {
      position: absolute;
      top: 40px;
      right: 188px;
      width: 80px;
      height: 28px;
      background: linear-gradient(180deg, #24A0F0 0%, #0189DF 100%);
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
      line-height: 28px;
      border-radius: 4px;
      padding-left: 7px;
      color: #ffffff;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
      -moz-transition: all 0.2s; /* Firefox 4 */
      -webkit-transition: all 0.2s; /* Safari 和 Chrome */
      -o-transition: all 0.2s; /* Opera */
      i {
        margin-right: 3px;
        font-size: 14px;
      }

      &:hover {
        box-shadow: 3px 3px 3px #000000;
      }
    }
  }

  .menu-box {
    float: left;
    width: 235px;
    height: calc(100% - 110px);
    overflow-y: auto;
    background-color: #22345E;
  }

  .all-content-box {
    float: right;
    width: calc(100% - 235px);
    height: calc(100% - 110px);
    overflow: scroll;
  }
}
</style>
<style lang="scss">
.menu-box {
  .el-menu-vertical-demo.el-menu {
    > div {
      > li {
        width: 235px;
      }
    }
  }

  .el-menu-item, .el-submenu__title {
    height: 34px;
    line-height: 34px;
    padding-left: 34px !important;

    > img {
      width: 19px;
      height: 19px;
      margin-right: 3px;
    }
  }

  .el-menu--inline {
    .el-menu-item {
      padding-left: 69px !important;

      &.is-active {
        background: url("./assets/imgs/menu-item-bg.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

}
</style>
